import React from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Card, Button, Row, Col, Spin } from 'antd';
import moment from 'moment';
import { connect } from 'dva';
import router from 'umi/router';
import downloadFile from '@/utils/utils';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import FooterToolbar from '@/components/FooterToolbar';

const FormItem = Form.Item;
@connect(({ guide, loading }) => ({
  guide,
  loading: loading.models.guide,
}))
class guideDetail extends React.Component {
  state = {};

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'guide/tabList',
      payload: ['BIZ_INS_TYPE', 'BIZ_ACCU_TYPE'],
    });
  }

  componentWillUnmount() {
    const { dispatch } = this.props;
    const parameter = {
      tit: null,
      type: null,
      areaName: null,
      source: null,
      keyWord: null,
      publishTime: null,
      content: null,
      affix: [],
    };
    dispatch({
      type: 'guide/updateModelData',
      payload: parameter,
    });
  }

  downLoad = item => {
    const file = item.split('|');
    downloadFile({ fileId: file[0], fileName: file[1] });
  };

  render() {
    const { guide, loading } = this.props;
    const formItemLayout = {
      labelCol: {
        xs: { span: 9 },
        sm: { span: 8 },
        md: { span: 6 },
        lg: { span: 5 },
        xl: { span: 4 },
        xxl: { span: 3 },
      },
      wrapperCol: {
        xs: { span: 17 },
        sm: { span: 17 },
        md: { span: 17 },
        lg: { span: 16 },
        xl: { span: 17 },
        xxl: { span: 17 },
      },
    };
    const affix = data =>
      data.map(item => (
        <p key={item.split('|')[0]} style={{ wordBreak: 'break-all' }}>
          <a onClick={() => this.downLoad(item)}>{item.split('|')[1]}</a>
        </p>
      ));
    return (
      <PageHeaderWrapper>
        <Spin tip="Loading..." spinning={loading}>
          <Card>
            <header style={{ textAlign: 'center', fontSize: 20, fontWeight: 'bold' }}>
              {guide.tit}
            </header>
            <Form>
              <Row>
                <Col span={12}>
                  <FormItem {...formItemLayout} label={<span>政策类型 </span>}>
                    <span>{guide.type}</span>
                  </FormItem>
                </Col>
              </Row>
              <Row>
                <Col span={12}>
                  <FormItem {...formItemLayout} label={<span>政策地区</span>}>
                    <span>{guide.areaName}</span>
                  </FormItem>
                </Col>
              </Row>
              <Row>
                <Col span={12}>
                  <FormItem {...formItemLayout} label={<span>来源 </span>}>
                    <span>{guide.source}</span>
                  </FormItem>
                </Col>
              </Row>
              <Row>
                <Col span={12}>
                  <FormItem {...formItemLayout} label={<span>关键字 </span>}>
                    <span>{guide.keyWord}</span>
                  </FormItem>
                </Col>
              </Row>
              <Row>
                <Col span={12}>
                  <FormItem {...formItemLayout} label={<span>公布时间</span>}>
                    <span>
                      {guide.publishTime
                        ? moment(guide.publishTime).format('YYYY-MM-DD HH:mm')
                        : '--'}
                    </span>
                  </FormItem>
                </Col>
              </Row>
              <Row style={{ marginTop: 50 }}>
                <Col span={12} offset={10}>
                  <FormItem {...formItemLayout}>
                    <span dangerouslySetInnerHTML={{ __html: guide.content }} />
                  </FormItem>
                </Col>
              </Row>
              <Row style={{ marginTop: 50 }}>
                <Col span={12}>
                  <FormItem {...formItemLayout} label={<span>附件</span>}>
                    {guide.affix && guide.affix.length ? affix(guide.affix) : '--'}
                  </FormItem>
                </Col>
              </Row>
            </Form>
          </Card>
        </Spin>
        <FooterToolbar>
          <Button onClick={() => router.goBack()}> 返回</Button>
        </FooterToolbar>
      </PageHeaderWrapper>
    );
  }
}
export default guideDetail;
